<template>

  <!--  风险点调查表单-->
  <div class="page_monitor-add">
    <el-form
      ref="form"
      :rules="rules"
      label-position="right"
      :model="currentRow"
      label-suffix="："
      label-width="140px">
      <el-card class="paicha_view">
        <el-form-item label="管养单位" prop="deptTreeId" style="margin-top: 20px">
          <organization
            :disabled="isLook"
            v-model="currentRow.deptTreeId"
            placeholder="选择管养单位"
            @change="changeDept"
          ></organization>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="路线" prop="roadId">
              <el-select
                :disabled="isLook"
                :popper-append-to-body="false"
                v-model="currentRow.roadId"
                clearable
                filterable
                placeholder="选择路线"
                @change="changeRoad">
                <el-option
                  v-for="item in roadSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="边坡位置" prop="positionName">
              <el-input v-model="positionName" disabled clearable placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="巡查人员" prop="userName">
              <el-input v-model="currentRow.userName" :disabled="isLook" clearable placeholder=""></el-input>
            </el-form-item>
<!--            <el-form-item label="隐患等级" prop="userName">-->
<!--              <el-tag size="mini" :style="currentRow.maintenanceInspectionType| gradeDangerColor" style="color: white">-->
<!--                {{currentRow.maintenanceInspectionTypeName}}-->
<!--              </el-tag>-->
<!--            </el-form-item>-->
          </el-col>
          <el-col :span="12">
            <el-form-item label="边坡" prop="slopeId" @change="changeSlope">
              <el-select
                :popper-append-to-body="false"
                v-model="currentRow.slopeId"
                :disabled="isLook"
                filterable
                clearable
                placeholder="选择边坡">
                <el-option
                  v-for="item in slopeSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起止桩号" prop="stoke">
              <el-input v-model="stoke" disabled clearable placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="巡查日期" prop="patrolTime">
              <el-date-picker
                style="width: 100%"
                v-model="currentRow.patrolTime"
                type="date"
                :disabled="isLook"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider><span style="font-size: 25px; color: #1990FE;">巡查内容</span></el-divider>
        <div style="width: 100%" class="contentBoxs">
          <el-tabs style="margin-top: 30px" v-model="activeName" tab-position="left" @tab-click="changeTabs">
            <el-tab-pane
              v-for="item in template"
              :key="item.id"
              :label="item.name"
              :name="item.name">
              <div v-if="item.name === '其他'">
                <div v-if="item.mathTypeName === '填写'">
                  <el-form-item prop="longitude" label="其他情况描述" label-width="120px">
                    <el-input
                      type="textarea"
                      :disabled="isLook"
                      :rows="2"
                      v-model="item.value"
                      :autosize="{ minRows: 4, maxRows: 6 }"
                      placeholder="没有包含的异常情况描述">
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              <div v-else>
                <el-form-item label-width="20px">
                  <el-checkbox-group
                    size="small"
                    @change="((val)=>{changeOption(val,item.childList)})"
                    v-model="item.valueList">
                    <el-checkbox
                      v-for="option in item.childList"
                      :key="option.id"
                      :disabled="isLook"
                      :label="option.id">
                      {{ option.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <div class="inside_tab">
                  <el-tabs v-model="activeName2" type="card" tab-position="left">
                    <el-tab-pane :disabled="item.valueList.indexOf(child1.id) ===-1" v-for="child1 in item.childList"
                                 :key="child1.id" :label="child1.name" :name="child1.id">
                      <div v-if="item.name === '坡体'">
                        <div v-for="child2 in child1.childList" :key="child2.id">
                          <div v-if="child2.mathTypeName === '填写' && child2.name === '其他'" style="margin-top: 10px">
                            <el-form-item prop="longitude" label="其他情况描述" label-width="120px">
                              <el-input
                                :disabled="isLook"
                                v-model="child2.value"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6 }"
                                placeholder="没有包含的异常情况描述"
                                style="width: 40%">
                              </el-input>
                            </el-form-item>
                          </div>
                          <div v-if="child2.mathTypeName === '填写' && child2.name !== '其他'"
                               style="display:inline-block;width:35%;margin-top: 10px">
                            <el-form-item prop="longitude" label-width="20px">
                              <el-input :disabled="isLook"
                                        size="mini"
                                        v-model.trim="child2.value"
                                        type="number"
                                        style="width: 70%">
                                <template slot="prepend">{{child2.name}}</template>
                              </el-input>
                            </el-form-item>
                          </div>
                          <div v-if="child2.mathTypeName === '照片'">
                            <el-form-item label="现场图片" label-width="100px" prop="picList">
                              <upload-img
                                :disabled="isLook"
                                v-model="child2.picList"
                                :limit="3"
                                :size-limit="3"
                                ref="uploadPic"></upload-img>
                            </el-form-item>
                          </div>
                          <div v-if="child2.mathTypeName === '单选'" style="line-height: 50px;margin-left: 20px">
                            <el-radio-group :disabled="isLook" size="mini" v-model="child2.value"
                                            style="width: 30%">
                              <el-radio-button
                                v-for="option in child2.childList"
                                :key="option.name"
                                :label="option.name">
                                {{ option.name }}
                              </el-radio-button>
                            </el-radio-group>
                            <!-- 单选对应的输入框-->
                            <div v-for="child3 in child2.childList" :key="child3.id">
                              <el-form-item v-if="child3.mathTypeName === '填写' && child2.value === '边坡坡面'"
                                            label-width="0px"
                                            class="slope_main_view">
                                <el-input :disabled="isLook"
                                          size="mini"
                                          v-model.trim="child3.value"
                                          type="number"
                                          style="width: 70%">
                                  <template slot="prepend">{{child3.name}}第</template>
                                  <template slot="append">级
                                  </template>
                                </el-input>
                              </el-form-item>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.name === '支挡防护工程' || item.name === '排水工程'">
                        <div v-if="child1.name === '其他'">
                          <div v-for="child2 in child1.childList" :key="child2.id">
                            <div v-if="child2.mathTypeName === '填写' && child2.name === '其他'" style="margin-top: 10px">
                              <el-form-item prop="longitude" label="其他情况描述" label-width="120px">
                                <el-input
                                  :disabled="isLook"
                                  v-model="child2.value"
                                  type="textarea"
                                  :autosize="{ minRows: 4, maxRows: 6 }"
                                  placeholder="没有包含的异常情况描述"
                                  style="width: 40%">
                                </el-input>
                              </el-form-item>
                            </div>
                            <div v-if="child2.mathTypeName === '填写' && child2.name !== '其他'"
                                 style="display:inline-block;width:35%;margin-top: 10px">
                              <el-form-item prop="longitude" label-width="20px">
                                <el-input :disabled="isLook"
                                          size="mini"
                                          v-model.trim="child2.value"
                                          type="number"
                                          style="width: 70%">
                                  <template slot="prepend">{{child2.name}}</template>
                                </el-input>
                              </el-form-item>
                            </div>
                            <div v-if="child2.mathTypeName === '照片'">
                              <el-form-item label="现场图片" label-width="100px" prop="picList">
                                <upload-img
                                  :disabled="isLook"
                                  v-model="child2.picList"
                                  :limit="9"
                                  :size-limit="4"
                                  ref="uploadPic"></upload-img>
                              </el-form-item>
                            </div>
                          </div>
                        </div>
                        <div v-if="child1.mathTypeName === '多选'">
                          <el-form-item label-width="100px">
                            <el-checkbox-group
                              size="small"
                              v-model="child1.valueList">
                              <el-checkbox
                                v-for="child2 in child1.childList"
                                :key="child2.id + ''"
                                :disabled="isLook"
                                :label="child2.id + ''">
                                {{ child2.name }}
                              </el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>
                          <div v-for="child2 in child1.childList" :key="child2.id">
                            <div v-if="child1.valueList.indexOf(child2.id) !==-1">
                              <el-divider content-position="left"><span style="font-size: 15px; color: #1990FE">{{child2.name}}</span>
                              </el-divider>
                              <div v-for="child3 in child2.childList" :key="child3.id">
                                <div v-if="child3.mathTypeName === '填写'"
                                     style="display:inline-block;width:35%;margin-top: 10px">
                                  <el-form-item prop="longitude" label-width="20px">
                                    <el-input :disabled="isLook"
                                              size="mini"
                                              v-model.trim="child3.value"
                                              type="number"
                                              style="width: 70%">
                                      <template slot="prepend">{{child3.name}}</template>
                                    </el-input>
                                  </el-form-item>
                                </div>
                                <div v-if="child3.mathTypeName === '照片'">
                                  <el-form-item label="现场图片" label-width="100px" prop="picList">
                                    <upload-img
                                      :disabled="isLook"
                                      v-model="child3.picList"
                                      :limit="9"
                                      :size-limit="4"
                                      ref="uploadPic"></upload-img>
                                  </el-form-item>
                                </div>
                                <div v-if="child3.mathTypeName === '单选'" style="line-height: 50px;margin-left: 20px">
                                  <el-radio-group :disabled="isLook" size="mini" v-model="child3.value">
                                    <el-radio-button
                                      v-for="option in child3.childList"
                                      :key="option.name"
                                      :label="option.name">
                                      {{ option.name }}
                                    </el-radio-button>
                                  </el-radio-group>
                                  <!-- 单选对应的输入框-->
                                  <div v-for="child4 in child3.childList" :key="child4.id">
                                    <el-form-item v-if="child4.mathTypeName === '填写' && child3.value === '边坡坡面'"
                                                  label-width="0px"
                                                  class="slope_main_view">
                                      <el-input :disabled="isLook"
                                                size="mini"
                                                v-model.trim="child4.value"
                                                type="number"
                                                style="width: 80%">
                                        <template slot="prepend">{{child4.name}}</template>
                                        <template slot="append">级
                                        </template>
                                      </el-input>
                                    </el-form-item>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="总体情况描述" name="img">
              <el-form-item label="描述信息" prop="explanation" label-width="120px">
                <el-input
                  :disabled="isLook"
                  v-model="currentRow.explanation"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder="（包括：病害情况、严重情况、异常情况）"
                  style="width: 60%">
                </el-input>
              </el-form-item>
              <el-form-item label="建议处置措施" prop="advice" label-width="120px">
                <el-input
                  :disabled="isLook"
                  v-model="currentRow.advice"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  placeholder=""
                  style="width: 60%">
                </el-input>
              </el-form-item>
              <el-form-item label="隐患等级" prop="maintenanceInspectionType">
                <el-radio-group size="small" v-model="currentRow.maintenanceInspectionType">
                  <el-radio-button
                    :disabled="isLook"
                    v-for="option in MaintenanceInspectionList"
                    :key="option.code"
                    :label="option.code">
                    {{ option.name }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>

    </el-form>
  </div>
</template>

<script>
import {getTemplateContent, patrolAdd, patrolUpdate} from "@/services/model/form";
import ItemMixins from "../item.mixins";
import UploadImg from "@/components/upload-img";
import Organization from "@/components/organization-unit/all";
import Enums from '@/utils/enums'

export default {
  props: ['isLook'],
  components: {UploadImg, Organization},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      rules: {
        deptTreeId: {required: true, message: "请选择管养单位"},
        roadId: {required: true, message: "请选择路线"},
        slopeId: {required: true, message: "请选择边坡"},
        patrolTime: {required: true, message: "请选择巡查时间"},
        userName: {required: true, message: "请输入巡查人"},
      },
      activeName: "坡体",
      activeName2: "",
      template: [],
      positionName: '',
      stoke: '',
      currentRow: {
        maintenanceInspectionType: 1,
        yangHuType: 2,
      },
      EnumMaintenanceInspectionList: [],
    };
  },
  computed: {
    MaintenanceInspectionList() {
      return this.EnumMaintenanceInspectionList.filter(x => x.code !== 0)
    },
  },
  filters: {

    gradeDangerColor(val) {
      switch (val) {
        case 0:
          return 'background-color:#0DC26B'
        case 1:
          return 'background-color:#0073b7'
        case 2:
          return 'background-color:#f39c12'
        case 3:
          return 'background-color:#ff851b'
        case 4:
          return 'background-color:#e43321'
        default:
          return 'background-color:#e43321'
      }
    },

  },
  methods: {
    changeSlope(val) {
      let res = this.slopeSelectList.filter(x => x.id === val)
      this.positionName = res[0].positionName
      this.stoke = res[0].stoke
    },
    changeTabs(val) {
      let tabsName = val._props.name
      this.template.map(x => {
        if (x.name === tabsName) {
          this.activeName2 = x.valueList[0] || ''
          return
        }
      })
    },
    changeOption(val, list) {
      if (val.length === 0) {
        this.activeName2 = ''
        return
      }
      list.map(x => {
        if (x.id === val[val.length - 1]) {
          this.activeName2 = x.id
          return
        }
      })
    },
    async getTemplate(row) {
      if (row) {
        this.$set(this, "activeName", '坡体');
        this.currentRow = row
        this.template = row.formList
        this.template.map(x => {
          if (x.name === '坡体') {
            this.activeName2 = x.valueList[0]
            return
          }
        })
        this.changeDept()
      } else {
        let res = await getTemplateContent({formType: 9});
        this.template = res.data;
        this.currentRow = {
          maintenanceInspectionType: 0,
          yangHuType: 2,
        }
        this.$set(this, "positionName", '');
        this.$set(this, "stoke", '');
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 新增编辑提交数据
    async submitData() {
      this.currentRow.formJson = JSON.stringify(this.template);
      let action = this.currentRow.id ? patrolUpdate : patrolAdd
      let res = await action(this.currentRow);
      this.$emit("disableds",false)
      if (res.code === 200) {
        this.currentRow = {};
        this.$notify({
          type: "success",
          title: "提示",
          message: "添加成功",
        });
        this.$emit("submitClose");
      }
    },
    // 表单校验
    validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid && resolve) {
            this.$emit("disableds",true)
            this.submitData();
          }
        });
      });
    },
    //获取路线列表
    async changeDept() {
      let list = await this.getRoadListByDept(this.currentRow.deptTreeId);
      if (this.currentRow.roadId) {
        this.changeRoad()
      } else if (list.length > 0) {
        this.$set(this.currentRow, "roadId", list[0].id);
        this.changeRoad()
      } else {
        this.$set(this.currentRow, "roadId", "");
        this.$set(this.currentRow, "slopeId", "");
      }
    },
    //查询灾害点列表
    async changeRoad() {
      this.slopeSelectList = [];
      const {roadId, deptTreeId} = this.currentRow;
      let list = await this.getSelectSlopeList(deptTreeId, roadId)
      if (this.currentRow.slopeId) {
        let info = await this.getSlopeInfo(this.currentRow.slopeId)
        this.$set(this, "positionName", info.positionName);
        this.$set(this, "stoke", info.stoke);
      } else if (list.length > 0) {
        this.$set(this.currentRow, "slopeId", list[0].id);
        this.$set(this, "positionName", list[0].positionName);
        this.$set(this, "stoke", list[0].stoke);
      } else {
        this.$set(this.currentRow, "slopeId", "");
      }
    },
  },
  created() {
  },
  mounted() {
    // this.getTemplate()
    // 启用状态枚举
    this.queryDictList(["EnumMaintenanceInspection"], ["EnumMaintenanceInspectionList"]);

  },
  activated() {
  },
};
</script>
<style lang="less" scoped>
  .hover_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;
  }

  .page_monitor-add {
    margin: 0 auto;

    .page-title {
      margin-bottom: 20px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: #1990FE;
      font-weight: 600;
      border-radius: 20px;
      box-shadow: 0px 0px 4px #161616;
      margin-top: 10px;
    }

    /deep/ .el-tabs__item.is-active {
      font-size: 20px;
      border-radius: 5px;
      font-weight: 600;
      color: white;
      text-align: center;
      background-color: #1990FE;
    }

    /deep/ .el-tabs__content {
      height: 460px;
      overflow: auto;
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
    }
  }

  .inside_tab {
    /deep/ .el-tabs__content {
      height: 100%;
      background-color: #f7f7f7;
      min-height: 350px;
    }

    /deep/ .el-tabs__item.is-active {
      font-size: 15px;
      border-radius: 5px;
      font-weight: 600;
      color: white;
      text-align: center;
      background-color: #1990FE;
    }

    /deep/ .el-tabs__item {
      font-size: 13px;
    }
  }

  .form_box {
    padding: 20px;
  }

  .s-white {
    color: #ffffff;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;

    .el-button {
      background: #1990FE;
      border: none;
    }
  }

  .paicha_view {
    overflow: auto;
    height: 84vh;

    /deep/ .slope_main_view {
      line-height: 40px;
      width: 40%;
      margin-bottom: 0px;

      .el-form-item__content {
        line-height: 28px;
      }
    }

    /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #1990FE;
      border-color: #1990FE
    }

    .el-tabs {
      padding-left: 40px;

      .el-tabs__active-bar {
        background: #1990FE;
      }

      .el-tabs__item {
        color: white;
      }

      .is-active {
        color: #1990FE;
      }

      .el-radio-button {
        span:hover {
          color: white;
          background: #1990FE;
        }
      }
    }

    .el-input--suffix .el-input__inner {
      color: #1990FE;
    }

    .el-card {
      box-shadow: 0px 0px 8px #757575;
      background: #ffffff;
      color: #1990FE;
      box-shadow: none;
      // font-size: 140%;
    }
  }

  .hover_card:hover {
    background: #1990FE !important;
    font-size: 210%;
    color: white !important;
    font-weight: 600;
  }

  // 设置单选框选中颜色
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1990FE;
    border-color: #1990FE;
  }

  .paicha_view .el-card {
    border: 1px solid #1990FE !important;
  }
  .contentBoxs {
    width: 100%;
    height: 50vh;
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;

    }

    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #1990FE;
      border-radius: 0px;

    }

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-collapse .el-collapse-item__header {
      margin-right: 20px;
    }
  }

</style>
